Vue.component('yl-button', {
    template: `
    <span>
        <el-button :type="type" @click="Export" :loading="loading">
            <slot></slot>
        </el-button>
        <el-table id="ExportData" :data="data" style="display: none; width: 100%;margin-bottom: 20px;">
        <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
        <el-table-column align="center" prop="Supplier_SerialNumber" show-overflow-tooltip label="供应商编号"></el-table-column>
            <el-table-column align="center" prop="Supplier_Name" show-overflow-tooltip label="供应商"></el-table-column>
            <el-table-column align="center" prop="Article_Name" width="250" show-overflow-tooltip label="供应商品"></el-table-column>
            <el-table-column align="center" prop="Quantity" show-overflow-tooltip  label="供应总量"></el-table-column>
            <el-table-column align="center" prop="Number" show-overflow-tooltip  label="对账次数"></el-table-column>
            <el-table-column align="center" prop="Purchase_Amount" show-overflow-tooltip label="采购总额">
                <template v-slot="{row}">
                    {{thousands(row.Purchase_Amount)}}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="Paid_Amount" show-overflow-tooltip label="已付总额">
                <template v-slot="{row}">
                    {{thousands(row.Paid_Amount)}}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="Wait_Amount" show-overflow-tooltip label="未付总额">
                <template v-slot="{row}">
                    {{thousands(row.Wait_Amount)}}
                </template>
            </el-table-column>
            <el-table-column align="center" prop="Sales_Amount" show-overflow-tooltip label="商品销售总额">
                <template v-slot="{row}">
                    {{thousands(row.Sales_Amount)}}
                </template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip label="总利润">
                <template v-slot="{row}">
                    {{thousands(accSub(row.Sales_Amount,row.Purchase_Amount))}}
                </template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip label="成本利润率">
                <template v-slot="{row}">
                    {{ percentage(accDiv(accSub(row.Sales_Amount,row.Purchase_Amount),row.Purchase_Amount)) }}
                </template>
            </el-table-column>
            <el-table-column align="center" show-overflow-tooltip label="销售利润率">
                <template v-slot="{row}">
                    {{ percentage(accDiv(accSub(row.Sales_Amount,row.Purchase_Amount),row.Sales_Amount)) }}
                </template>
            </el-table-column>
        </el-table>
    </span>`,
    props: ['loading', 'data', 'type'],
    methods: {
        Export() {
            this.$emit('click')
        }
    }
})
Vue.component('show-detail', {
    template: `<el-dialog title="明细查询" :visible.sync="visibleDialog" width="80vw">
    <el-table :data="tableData" stripe border min-height="50vh" style="width: 100%">
        <el-table-column align="center" type="index" label="序号" width="50"></el-table-column>
        <el-table-column align="center" prop="Purchase_Order_Detail_SerialNumber" show-overflow-tooltip label="采购订单明细"></el-table-column>
        <el-table-column align="center" prop="Supplier_Name" show-overflow-tooltip label="供应商名称"></el-table-column>
        <el-table-column align="center" prop="Article_Name" show-overflow-tooltip label="商品名称"></el-table-column>
        <el-table-column align="center" prop="Specifications_Name" show-overflow-tooltip label="规格名称"></el-table-column>
        <el-table-column align="center" prop="Quantity" show-overflow-tooltip label="采购数量"></el-table-column>
        <el-table-column align="center" prop="Purchase_Unit_Price" show-overflow-tooltip label="采购单价"></el-table-column>
        <el-table-column align="center" prop="Amount" show-overflow-tooltip label="采购总价"></el-table-column>
    </el-table>
    <el-pagination style="margin-top: 5px;" background @size-change="handleSizeChange"
        @current-change="handleCurrentChange" :current-page="form.page" :page-sizes="[10, 20, 30, 50]"
        :page-size="form.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
    <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:visible',false)">返回</el-button>
    </span></el-dialog>`,
    props: ['id','visible'],
    data() {
        return {
            visibleDialog: false,
            refreshDialog: false,
            tableData: [],
            form: {
                SQLSerialNumber: "P_supplier_purchase_detail",
                PaginationNumber: 1,
                RowAmount: 10,
                ExtensionCondition: '',
                Condition: ''
            },
            total: 0,
        }
    },
    watch: {
        visible() {
            this.visibleDialog = this.visible
        },
        visibleDialog(val) {
            this.$emit('update:visible', val)
            if (val) {
                this.form.Condition = window.btoa(unescape(encodeURIComponent(this.id)));
                this.getList(this.form)
            }
        },
    },
    methods: {
        handleSizeChange(val) {
            this.form.PaginationNumber = 1;
            this.form.RowAmount = val;
            this.getList(this.form)
        },
        handleCurrentChange(val) {
            this.form.PaginationNumber = val;
            this.getList(this.form)
        },
        getList(data) {
            const that = this
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalPaginationQueryBySQLSerialNumber`,
                type: 'POST',
                data,
                success: function (Result) {
                    that.tableData = Result.Rows;
                    that.total = Result.TotalRows;
                },
                complete: function (XMLHttpRequest) {
                    that.refreshDialog = false;
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        }
    }
})
new Vue({
    el: '#app',
    data() {
        return {
            form: {
                SQLSerialNumber: "P_purchase_order_supplier",//与供应商对账
                PaginationNumber: 1,//页数
                RowAmount: 20,//每页数据条数
                Condition: '',
                ExtensionCondition: '',
                Article_Name: '',
                Supplier_Name:'',
                Purchase_Date: null,
            },
            total: 0,
            tableData: [],	//表格数据
            ExportData: [],//导出
            loading: false,
            dialogVisible:false,
            Supplier_SerialNumber:'',
        }
    },
    mounted() {
        this.getList(this.form);//前端分页
    },
    methods: {
        onSerach() {			//查询方法
            this.form.PaginationNumber = 1;
            this.getList(this.form)
        },
        handleSizeChange(val) {
            this.form.PaginationNumber = 1;
            this.form.RowAmount = val;
            this.getList(this.form)
        },
        handleCurrentChange(val) {
            this.form.PaginationNumber = val;
            this.getList(this.form)
        },
        Show(Supplier_SerialNumber){
            this.Supplier_SerialNumber = Supplier_SerialNumber
            this.dialogVisible = true
        },
        getList(form) {//换页方法
            const that = this
            let data = deepClone(form);
            data.Condition = window.btoa(unescape(encodeURIComponent("%" + data.Article_Name + "%,%"+ data.Supplier_Name +"%")))
            let sql = "";
            if (data.Purchase_Date) {
                sql = sql + "WHERE business_purchase_order.Purchase_Date BETWEEN '" + data.Purchase_Date[0] + "' AND '" + data.Purchase_Date[1] + "'\r\n"
            }
            data.ExtensionCondition = window.btoa(unescape(encodeURIComponent(sql)));
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalPaginationQueryBySQLSerialNumber`,
                type: 'POST',
                data,
                success: function (Result) {
                    that.tableData = Result.Rows;
                    that.total = Result.TotalRows;
                },
                complete: function (XMLHttpRequest) {
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
        Export(form) {//导出
            const that = this;
            this.loading = true;
            let data = deepClone(form);
            data.Condition = window.btoa(unescape(encodeURIComponent("%" + data.Article_Name + "%,%"+ data.Supplier_Name +"%")))
            let sql = "";
            if (data.Purchase_Date) {
                sql = sql + "AND business_purchase_order.Purchase_Date BETWEEN '" + data.Purchase_Date[0] + "' AND '" + data.Purchase_Date[1] + "'\r\n"
            }
            data.ExtensionCondition = window.btoa(unescape(encodeURIComponent(sql)));
            $.ajax({
                headers: requestHeaders(),
                url: `${BASE_URL2}/generalBusiness/generalQueryBySQLSerialNumber`,
                type: 'POST',
                data,
                success: function (Result) {
                    if (Result.length > 0) {
                        that.ExportData = Result;
                        that.$nextTick(() => {
                            let wb = XLSX.utils.table_to_book(document.querySelector("#ExportData"));
                            var wbout = XLSX.write(wb, {
                                bookType: "xlsx",
                                bookSST: true,
                                type: "array"
                            });
                            try {
                                saveAs(
                                    new Blob([wbout], {
                                        type: "application/octet-stream"
                                    }),
                                    "采购对账表" + (+new Date()) + ".xlsx"
                                );
                            } catch (e) {
                                if (typeof console !== "undefined") console.log(e, wbout);
                            }
                            that.$message({
                                message: '已成功导出',
                                type: 'success'
                            })
                            return wbout;
                        })
                    }else{
                        that.$message({
                            message: '暂无可导出的数据',
                            type: 'warning'
                        })
                    }
                },
                complete: function (XMLHttpRequest) {
                    that.loading = false;
                    requestPretreatment(XMLHttpRequest);
                },
                dataType: "json"
            });
        },
    },
})